<template>
  <footer class="app-footer">
    <div class="footer-content">
      <div class="branding">
        <h3>简谱打谱编辑器</h3>
        <p>版本: 1.0.0</p>
      </div>
      
      <div class="links">
        <div class="link-group">
          <h4>支持</h4>
          <a @click="openHelp">使用指南</a>
          <a @click="openFeedback">意见反馈</a>
        </div>
        
        <div class="link-group">
          <h4>资源</h4>
          <a @click="exportKeymap">快捷键参考</a>
          <a @click="showChangelog">更新日志</a>
        </div>
      </div>

      <div class="social">
        <button class="icon-button">
          <i class="fab fa-github"></i>
        </button>
        <button class="icon-button">
          <i class="fab fa-weixin"></i>
        </button>
      </div>
    </div>
    <Modal :show="changelog" @close="changelog = false">
        <h2>更新日志</h2>
        <div class="changelog-content">
            <p v-for="(log, index) in changelogs" :key="index">
            {{ log.version }} - {{ log.date }}\n{{ log.description }}
            </p>
        </div>
    </Modal>
    <div class="copyright">
      © 2025 萧白工作室 - 保留所有权利
    </div>
  </footer>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const changelogs =[
  {
    version: '1.1.0',
    date: '2024-03-15',
    description: '新增快捷键导出功能，优化界面交互设计'
  },
  {
    version: '1.0.0',
    date: '2024-01-01',
    description: '初始版本发布，支持基础乐谱编辑功能'
  }
];
const router = useRouter();

const openHelp = () => {
  window.open('/help', '_blank');
};

const openFeedback = () => {
  router.push('/feedback');
};

const exportKeymap = async () => {
  // 实现快捷键导出逻辑
   try {
    const keymap = await import('@/utils/keyMap');
    ExportService.exportToText(
      Object.entries(keymap.default).map(([key, action]) => `${key.padEnd(15)} ${action}`).join('\n'),
      '快捷键参考'
    );
  } catch (error) {
    alert(`导出失败: ${error.message}`);
  }
};
const changelog = ref(false);
const showChangelog = () => {
  changelog.value = true;
};
</script>

<style scoped>
.app-footer {
  background: #f5f5f5;
  padding: 2rem 1rem;
  border-top: 1px solid #ddd;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.links {
  display: flex;
  gap: 3rem;
}

.link-group h4 {
  margin-bottom: 0.5rem;
  color: #333;
}

.link-group a {
  display: block;
  margin: 0.3rem 0;
  cursor: pointer;
  color: #666;
}

.social {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.icon-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ddd;
}

.copyright {
  text-align: center;
  margin-top: 2rem;
  color: #999;
}
</style>